<template>
	<view class="mine-sell">
		<!-- 返回顶部按钮 -->
		<u-back-top :scroll-top="scrollTop" top="10" :duration="240" :iconStyle="iconStyle" :customStyle="custom">
		</u-back-top>
		<u-empty v-if="isNotNull" mode="order" icon="/static/images/common/order.png" textSize="18" width="220"
			height="220"></u-empty>
		<block v-for="(res, index) in list" :key="index">
			<view class="order-detail">
				<view class="date">购买时间:&emsp;{{ res.date }}</view>
				<view class="content">
					<image class="detail-img" :src="res.imgUrl" mode="widthFix"></image>
					<view class="detail-content">
						<view class="title">{{ res.title }}</view>
						<view class="price-number">
							<view class="price">￥ {{ res.price }}</view>
							<view class="number">X {{ res.number }}</view>
						</view>
					</view>
				</view>
				<view class="total-price">
					<view class="total-goods">共{{ res.total_number }}件商品</view>
					<view class="price">实付款￥{{ res.total_price }}</view>
				</view>
				<view class="tips-button-group">
					<view class="text-content">
						<view class="order-mobile-content">买家电话: {{ res.mobile }}</view>
						<view class="order-mobile-content">订单编号: {{ res.order }}</view>
					</view>
					<view class="button-group" v-if="res.status == 2 && res.final == 0">
						<view class="button-two" @click="confirmReceipt(res.id)">确认收款
						</view><!-- :class="`button-two ${isSuccess ? 'success' : ''}`" -->
					</view>
				</view>
				<view class="order-status-style">
					<view class="order-status" v-if="res.status === 1">订单状态: 请等待买家付款</view>
					<view class="order-status" v-if="res.status === 2">订单状态: 买家已付款</view>
					<view class="order-status" v-if="res.status === 3">订单状态: 买家已取消，商品已重新上架</view>
					<view class="order-status" v-if="res.status === 4">订单状态: 订单已完成</view>
					<view class="button-group" v-if="res.status == 2 && res.final == 1">
						<view class="button-one">待平台确认收款</view>
					</view>
				</view>
				<view class="payImg-content" v-if="res.payPic[0] != ''">
					<view class="payImg-style">
						<view class="payImg-text">支付截图</view>
						<view class="payImg">
							<u-album :urls="res.payPic"></u-album>
						</view>
					</view>
				</view>
			</view>
		</block>
		<u-loadmore v-if="list.length != 0" :status="loading.status" :loading-text="loading.loadingText"
			:loadmore-text="loading.loadmoreText" :nomore-text="loading.nomoreText" :icon="true" loadingIcon="circle"
			:line="true" marginTop="30" marginBottom="20" iconColor="#cecece" color="#cecece" @loadmore="lower" />
		<!-- 弹窗 -->
		<view class="mask" v-if="showTips" @touchmove.stop.prevent>
			<u-transition :show="showTips">
				<view class="modal-bg-box">
					<view class="title">提示</view>
					<view class="inner-box">
						<view class="text-tips" :selectable="false">{{ maskTips }}</view>
						<view class="button-box">
							<view class="button-one" @click="cancel">取消</view>
							<view :class="`button-two ${isSuccess ? 'success' : ''}`" @click="confirm">确定</view>
						</view>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		sellOrderList,
		completeOrder
	} from '@/common/api.js';
	export default {
		data() {
			return {
				/* 返回顶部按钮 */
				scrollTop: 0, // 返回顶部滚动值
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: '600',
					color: '#FFFFFF'
				}, // 滚动内层样式
				custom: {
					background: '#CB8F58'
				}, // 滚动外层样式

				/* 加载更多 */
				loading: {
					status: 'loadmore', // 加载更多设置
					loadingText: '加载中',
					loadmoreText: '轻轻上拉加载更多',
					nomoreText: '暂时没有了',
				}, // 加载设置

				/* 订单数据 */
				pages: 1, // 订单页数
				total_page: '', // 订单总页数
				amount: 5, // 订单条数
				total_amount: '', // 订单总数
				times: 2, // 数据条数
				list: [], // 订单详情列表
				pageID: '', // 订单ID
				isNotNull: false, // 列表是否为空

				/* 弹窗 */
				maskTips: '', // 弹窗提示
				showTips: false, // 弹窗状态
				isSuccess: false, // 禁止点击

				// urls1: ['https://cdn.uviewui.com/uview/album/1.jpg'],
			};
		},
		onLoad() {
			/* 获取订单数据 */
			this.getOrder(); // 获取订单数据信息
			this.loading.status = 'loadmore';
		},
		onShow() {

		},
		/* 返回顶部 */
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* 加载更多 */
		onReachBottom() {
			this.lower();
		},
		methods: {

			/* 获取买单信息 */
			getOrder() {
				const that = this;
				that.pages = 1; // 统一第一页
				const params = {
					page: that.pages,
					limit: that.amount,
					status: that.status
				};
				sellOrderList(params).then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(result);
						that.total_page = result.last_page;
						that.total_amount = result.total;
						that.list = result.data.map(item => {
							let imgList = [];
							imgList.push(item.payPic);
							return {
								id: item.id,
								date: item.createTime,
								imgUrl: item.goodsLogo,
								title: item.goodsName,
								price: Fn.checkDigit({
									number: item.price,
									len: 4,
									max: 100000000,
									min: -1
								}) /* item.price */ , // 商品单价
								number: item.num,
								total_number: item.num,
								total_price: /* Fn.checkDigit({ number: item.sumPrice, len: 4, max: 100000000, min: -1 }) */ item
									.sumPrice, // 商品总价
								pay_price: /* Fn.checkDigit({ number: item.payMoney, len: 4, max: 100000000, min: -1 }) */ item
									.payMoney, // 实际支付金额
								status: item.status,
								order: item.orderSn,
								mobile: item.userPhone,
								final: item.is_final,
								payPic: imgList,
								payTime: item.payTime
							};
						});
						if (that.list.length === 0) {
							that.loading.status = 'nomore';
							that.isNotNull = true;
						} else {
							that.isNotNull = false;
						};
						if (that.list.length == that.total_amount) {
							that.loading.status = 'nomore';
						};
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 加载下一页数据 */
			getMoreDetail() {
				const that = this;
				const params = {
					page: that.pages,
					limit: that.amount,
					status: that.status
				};
				sellOrderList(params).then((res) => {
					const result = res.data;
					that.total_page = result.last_page;
					let moreList = result.data.map(item => {
						let imgList = [];
						imgList.push(item.payPic);
						return {
							id: item.id,
							date: item.createTime,
							imgUrl: item.goodsLogo,
							title: item.goodsName,
							price: item.price, // 商品单价
							number: item.num,
							total_number: item.num,
							total_price: item.sumPrice, // 商品总价
							pay_price: item.payMoney, // 实际支付金额
							status: item.status,
							order: item.orderSn,
							mobile: item.userPhone,
							final: item.is_final,
							payPic: imgList,
							payTime: item.payTime
						};
					});
					for (let i = 0; i < moreList.length; i++) {
						that.list.push(moreList[i]);
					};
					if (that.pages <= that.total_page) {
						that.loading.status = 'loadmore';
					} else {
						setTimeout(() => {
							that.loading.status = 'nomore';
						}, 700);
					};
				});
			},

			/* 向下滚动 */
			lower() {
				// console.log(e);
				const that = this;
				if (that.pages <= that.total_page && that.list.length != that.total_amount) {
					that.loading.status = 'loading';
					setTimeout(() => {
						that.pages = that.pages + 1;
						that.getMoreDetail();
					}, 700);
				} else {
					that.loading.status = 'nomore';
				};
			},

			/* 提交增加防抖 */
			touchOffDebounce() {
				// 第一个参数为当前需要添加防抖的函数名 ***不需要加括号
				// 第二个为延时执行函数的时间
				// 第三个是否立即执行
				this.$debounce(this.confirm, 2000, true);
			},

			/* 确定收货 */
			confirmReceipt(id) {
				this.pageID = id;
				this.showTips = true;
				this.maskTips = '请确认用户已支付后收款';
			},

			/* 弹窗取消 */
			cancel() {
				this.showTips = false;
			},

			/* 弹窗确认 */
			confirm() {
				const that = this;
				const params = {
					id: that.pageID
				};
				that.isSuccess = true;
				uni.$u.throttle(() => {
					completeOrder(params).then((res) => {
						that.showTips = false;
						if (res.status === 1) {
							setTimeout(() => {
								Fn.Toast(res.msg, 3, 1500);
								that.isSuccess = false;
								that.getOrder();
							}, 500);
						} else {
							that.isSuccess = false;
							Fn.Toast(res.msg, 3, 1500);
						};
					});
				}, 1500);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	uni-page-body {
		background: none;
	}

	.mine-sell {
		padding: 20rpx 18px;
		font-family: PingFang_Medium;

		.mask {
			position: fixed;
			z-index: 1001;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);

			.modal-bg-box {
				background-color: #FFFFFF;
				width: 580rpx;
				// height: 390rpx;
				position: absolute;
				left: 50%;
				top: 45%;
				transform: translate(-50%, -50%);

				.title {
					text-align: center;
					margin: 40rpx 0;
					font-size: 42rpx;
					font-weight: 600;
				}

				.inner-box {
					margin: 20rpx 20rpx 40rpx 20rpx;
					text-align: center;

					.text-tips {
						display: block;
						line-height: 70rpx;
						font-size: 36rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: bold;
						color: #89898C;
					}

					.button-box {
						text-align: center;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.button-one {
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 40rpx 0 0;
							text-align: center;
							color: #000000;
							border: 2px solid #000000;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
						}

						.button-two {
							background-color: #000000;
							display: inline-block;
							width: 120rpx;
							height: 58rpx;
							line-height: 58rpx;
							margin: 0 0 0 40rpx;
							text-align: center;
							color: #FFFFFF;
							border-radius: 8rpx;
							font-size: 26rpx;
							font-weight: bold;
							cursor: pointer;
							
							&.success {
								pointer-events: none;
								cursor: default;
							}
						}
					}
				}
			}
		}

		.order-detail {
			background-color: #FFFFFF;
			padding: 20rpx 30rpx 26rpx 30rpx;
			box-sizing: border-box;

			&:nth-of-type(n+1) {
				margin-bottom: 26rpx;
			}

			.date {
				color: #89898C;
				font-size: 26rpx;
			}

			.content {
				margin: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.detail-img {
					width: 23vw;
					height: 23vw;
				}

				.detail-content {
					width: 52vw;

					.title {
						font-size: 28rpx;
					}

					.price-number {
						margin-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price {
							font-size: 30rpx;
							font-weight: 600;
						}

						.number {
							color: #89898C;
							font-size: 24rpx;
							font-weight: 600;
						}
					}
				}
			}

			.total-price {
				display: flex;
				align-items: center;
				justify-content: right;

				.total-goods {
					color: #89898C;
					font-size: 26rpx;
				}

				.price {
					margin-left: 20rpx;
					font-size: 26rpx;
				}
			}

			.tips-button-group {
				margin: 34rpx 0 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tips {
					font-size: 28rpx;
				}

				.order-mobile-content {
					font-size: 26rpx;

					&:nth-of-type(n+2) {
						margin-top: 20rpx;
					}

					.order {
						margin-bottom: 10rpx;
					}

					.mobile {
						margin-top: 10rpx;
					}
				}

				.button-group {
					display: flex;
					align-items: center;

					.button-one {
						width: 17vw;
						// margin-right: 10rpx;
						padding: 8rpx 0;
						background-color: #FFFFFF;
						// border: 1px solid #AD4440;
						text-align: right;
						color: #AD4440;
						font-size: 30rpx;
						cursor: pointer;
					}

					.button-two {
						width: 17vw;
						margin-left: 10rpx;
						padding: 8rpx 0;
						background-color: #AD4440;
						text-align: center;
						color: #FFFFFF;
						font-size: 22rpx;
						cursor: pointer;

						&.success {
							pointer-events: none;
							cursor: default;
						}
					}
				}
			}

			.order-status-style {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.order-status {
					color: #AD4440;
					font-size: 26rpx;
				}

				.pay-time {
					color: #89898C;
					font-size: 26rpx;
				}

				.button-group {
					display: flex;
					align-items: center;

					.button-one {
						// width: 17vw;
						// margin-right: 10rpx;
						padding: 8rpx 0;
						background-color: #FFFFFF;
						// border: 1px solid #AD4440;
						text-align: right;
						color: #AD4440;
						font-size: 30rpx;
						cursor: pointer;
					}

					// .button-two {
					// 	width: 17vw;
					// 	margin-left: 10rpx;
					// 	padding: 8rpx 0;
					// 	background-color: #AD4440;
					// 	text-align: center;
					// 	color: #FFFFFF;
					// 	font-size: 22rpx;
					// 	cursor: pointer;
					// }
				}
			}

			.payImg-content {
				margin-top: 26rpx;

				.payImg-style {
					display: flex;
					align-items: center;

					.payImg-text {
						font-size: 26rpx;
					}

					.payImg {
						margin-left: 40rpx;
						// width: 250rpx;
						// height: 250rpx;
					}
				}
			}
		}
	}
</style>
